<template>
	<div class='container'>
		<a href="https://github.com/surmon-china/vue-awesome-swiper" target="_blank">vue-awesome-swiper轮播插件</a>
		<br>
		<br>
		<br>
		<swiper :options="swiperOption">
			<swiper-slide>
				<Child1 />
			</swiper-slide>
			<swiper-slide>
				<Child2 />
			</swiper-slide>
			<swiper-slide>
				<Child3 />
			</swiper-slide>
			<template #button-prev>
				<div class="swiper-button-prev">
					向左
				</div>
			</template>
			<template #button-next>
				<div class="swiper-button-next">
					向右
				</div>
			</template>
		</swiper>
	</div>
</template>

<script setup>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import Child3 from './Child3.vue'
// import SwiperClass, { Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// import swiper module styles
import 'swiper/css'
import 'swiper/css/pagination'

import { ref } from 'vue'
const swiperOption = ref({
	allowTouchMove: false,
	loop: false,
	slidesPerView: 1,
	initialSlide: 0,
	paceBetween: 20,
	slideToClickedSlide: true,
	// 使用前进后退按钮来控制Swiper切换。
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	speed: 300
})
</script>
<style lang='less' scoped>
.container {}

.box1 {
	background-color: antiquewhite;
	height: 300px;
}
</style>
